<template>
  <div class="box">
    <RouteTitle />
    <div class="content">
      <div class="explain">
        <!-- <div>说明：</div>
        <div>每推荐1位好友，可立即获得5次对话次数</div>
        <div style="display: flex; justify-content: space-between">
          成为会员后，邀请好友成为会员，您将获得30%的佣金抽成。
        </div> -->
        <a-button type="primary" @click="genShareLink" :loading="copyLoading"
          >邀请新用户链接</a-button
        >
      </div>
      <a-table
        class="tab-list"
        :dataSource="dataSource"
        :columns="columns"
        :scroll="{ x: 150 }"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        rowKey="uid"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'nickname'">
            <a-row v-if="record.user" align="middle" :gutter="[16, 16]">
              <a-col> <a-avatar :src="record.user.avatar" /></a-col>
              <a-col>{{ record.user.nickname }}</a-col>
            </a-row>
          </template>
          <template v-if="column.key === 'openid'">
            {{ record.openid }}
          </template>
          <template v-if="column.key === 'phone'">
            {{ record.user.phone_txt }}
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  computed,
  onMounted,
} from "vue";
import {
  SearchOutlined,
  CheckOutlined,
  LineOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";
import request from "../../../common/utils/request";
import memberShip from "./modules/memberShip.vue";
import { message,notification ,Modal } from "ant-design-vue";
import store from "@/store";
import utils from "@/common/utils/utils";
import { useClipboardItems } from '@vueuse/core'
export default defineComponent({
  name: "VoucherCenter",
  components: {
    SearchOutlined,
    CheckOutlined,
    LineOutlined,
    PlusOutlined,
  },
  setup() {
    // 路由
    const route = useRoute();
    const router = useRouter();
    const { content, copy, isSupported } = useClipboardItems()
    const state = reactive({
      dataSource: [],
      columns: [
        {
          title: "已邀请用户",
          dataIndex: "nickname",
          key: "nickname",
        },
        {
          title: "手机号码",
          dataIndex: "phone",
          key: "phone",
        },
        {
          title: "openid",
          dataIndex: "openid",
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
        },
      ],
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      copyLoading: false,
    });
    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));

    function createClipboardItems(text) {
        const mime = 'text/html'
        const blob = new Blob([text], { type: mime })
        return new ClipboardItem({
          [mime]: blob,
        })
      }

    const genShareLink = () => {
      state.copyLoading = true;
      request
        .post("/work_ai", "/user/invite/code")
        .then( async (res) => {
          if (res.result && res.result.url) {
            let link = `注册即送免费试用机会，戳链接开始使用：${res.result.url}`;
            state.copyLoading = false;
            // utils.copyText(link);
            if(isSupported.value){
                  try {
                    await navigator.clipboard.writeText(link);
                    notification.success({ message: "复制成功！", duration: 1 });
                  } catch (error) {
                    Modal.warning({
                      title: "提示：复制失败，请手动复制",
                      content: link,
                    })
                  }
                } else {
                  Modal.warning({
                    title: "提示：复制失败，请手动复制",
                    content: link,
                  })
             }

          }
        })
        .catch((err) => {
          state.copyLoading = false;
        });
    };

    const getSpreadList = () => {
      let params = {
        page: state.page,
        pageSize: state.pageSize,
      };
      state.loading = true;
      request.get("/work_ai", "/user/spread/list", params).then((res) => {
        state.dataSource = res.list;
        state.loading = false;
        state.total = res.total;
      });
    };
    getSpreadList();
    const handleTableChange = (pager) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getSpreadList();
    };
    return {
      ...toRefs(state),
      genShareLink,
      pagination,
      handleTableChange,
      getSpreadList,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  padding: 14px 14px 0;
  .content {
    margin-top: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.4);
    padding: 24px;
    .explain {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
